<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>历史聊天记录</title>
		<script src="../../../javascript/api.js"></script> <!-- api.js必须放到最开头 -->
	    <script src="../../../javascript/axios.js"></script>
	    <script src="../../../javascript/vue.js"></script>
	    <script src="../../jquery.js" type="text/javascript" charset="utf-8"></script>
	    <script src="../../../javascript/laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../css/history.css"/>
	</head>
	<body>
		<div class="content" id="content">
			<div class="left">
				<dl  v-for="item in allType">
					<dt onclick="showDt(this)"><span style="margin-right: 5px;">></span>{{item.title}}</dt>
					<dd v-for="item_li in item.li">
						<img width="38" height="38" :src="item_li.headImg"/>
						<span class="name">{{item_li.name}}</span>
						<span class="work">{{item_li.work}}</span>
					</dd>
				</dl>
			</div>
			<div class="right">
				<div class="right_search">
					<input type="search" placeholder="搜索" name="" required="" placeholder="Search" x-webkit-speech="" x-webkit-grammar="builtin:search" lang="zh-CN">
				</div>
				<div class="right_type">
					<ul>
						<li @click="changeType('all')" :class="{'choose':rightContentType==='all'}" style="margin-left: 20px;">全部</li>
						<li @click="changeType('pic')" :class="{'choose':rightContentType==='pic'}">图片</li>
						<li @click="changeType('doc')" :class="{'choose':rightContentType==='doc'}">文档</li>
						<li style="float: right;">
							<input id="test1" class="layDate" placeholder="请选择日期" type="" name="" v-model="layDate" />
							<!--<img  style="width: 23px;margin-top: 18px;" src="../../../images/weChat/rili.png"/>-->
						</li>
					</ul>
				</div>
				<div class="right_content">
					<div v-if="rightContentType==='all'" class="right_content_all">
						<div class="item_all" v-for="item in itemAll">
								<p><span></span>{{item.time}}<span></span></p>
								<div class="all_content" v-for="item_all in item.allContent">
									<img class="headImg" :src="item_all.headImg"/>
									<span class="name">{{item_all.name}}&nbsp;&nbsp;&nbsp;{{item_all.time}}</span>
									<span class="text">{{item_all.text}}</span>
								</div>
						</div>
					</div>
					<div v-if="rightContentType==='pic'" class="right_content_pic">
						<div class="item_pic" v-for="item in itemPic">
								<p><span></span>{{item.time}}<span></span></p>
								<div class="img_content">
									<img v-for="item_img in item.imgContent" :src="item_img"/>
								</div>
								
						</div>
					</div>
					<div v-if="rightContentType==='doc'" class="right_content_doc">
						<div class="item_doc" v-for="item in itemDoc">
								<p><span></span>{{item.time}}<span></span></p>
								<div class="doc_content" v-for="item_doc in item.docContent">
									<img class="headImg" :src="item_doc.img"/>
									<span class="name">{{item_doc.name}}({{item_doc.size}})</span>
									<span class="upLoadTime">{{item_doc.upLoadTime}}</span>
									<span class="who">{{item_doc.who}}</span>
								</div>
						</div>
					</div>
				</div>
			</div>
			
		</div>
	</body>
	<script src="../js/chatApi.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			laydate.render({
			  elem: '#test1' //指定元素
			  ,change: function(value, date, endDate){
				    console.log(value);
				    console.log(date);
				    console.log(endDate);
				  }
			});
		})

		const accessToken = localStorage.token;
		function showDt(ev){
			apiShowDt(ev);
		}
		
		new Vue({
			el:"#content",
			data:{
				layDate:'',
				rightDivSearch:'',
				rightContentType:'all',
				headImg:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533042412960&di=4819e5aa315c03e094ca54ea053fd484&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F08%2F2123827332138.jpg',
				allType:[
					{
						title:"最近聊天",
						li:[
							{
								headImg:'../../../images/weChat/headImg.png',
								name:"张三",
								work:"人事",
							},
							{
								headImg:'../../../images/weChat/headImg.png',
								name:"张三",
								work:"人事",
							},
							{
								headImg:'../../../images/weChat/headImg.png',
								name:"张三",
								work:"人事",
							},
							
						]
					},
					{
						title:"我的好友",
						li:[
							{
								headImg:'../../../images/weChat/headImg.png',
								name:"张三",
								work:"人事",
							},
							{
								headImg:'../../../images/weChat/headImg.png',
								name:"张三",
								work:"人事",
							},
							{
								headImg:'../../../images/weChat/headImg.png',
								name:"张三",
								work:"人事",
							},
							
						]
					},
					{
						title:"我的群组",
						li:[
							{
								headImg:'../../../images/weChat/headImg.png',
								name:"张三",
								work:"人事",
							},
							{
								headImg:'../../../images/weChat/headImg.png',
								name:"张三",
								work:"人事",
							},
							{
								headImg:'../../../images/weChat/headImg.png',
								name:"张三",
								work:"人事",
							},
							
						]
					},
				],
				itemPic:[
					{
						time :'2018-07-20',
						imgContent:[
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
						]
					},
					{
						time :'2018-07-25',
						imgContent:[
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
						]
					},
					{
						time :'2018-07-30',
						imgContent:[
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
							'../../../images/weChat/D.png',
						]
					},
					
				],
				itemDoc:[
					{
						time:'2018-12-10',
						docContent:[
							{
								name :'xxxx文件的说明',
								size:'13K',
								upLoadTime:'11:30',
								who:'张三',
								downLoad:'',
								img:'../../../images/weChat/D.png',
							},
							{
								name :'xxxx文件的说明',
								size:'13K',
								upLoadTime:'11:30',
								who:'张三',
								downLoad:'',
								img:'../../../images/weChat/D.png',
							},
						]
					},
					{
						time:'2018-12-10',
						docContent:[
							{
								name :'xxxx文件的说明',
								size:'13K',
								upLoadTime:'11:30',
								who:'张三',
								downLoad:'',
								img:'../../../images/weChat/D.png',
							},
						]
					}
				],
				itemAll:[
					{
						time:'2018-01-12',
						allContent:[
							{
								name:'张三',
								headImg:'../../../images/weChat/D.png',
								time:'11:30',
								text:'哈哈哈哈'
							},
							{
								name:'李赛三',
								headImg:'../../../images/weChat/D.png',
								time:'11:51',
								text:'你好呀嘻嘻'
							},
							{
								name:'张三',
								headImg:'../../../images/weChat/D.png',
								time:'02:51',
								text:'急啊急啊呀嘻嘻'
							}
						]
					},
					{
						time:'2018-01-12',
						allContent:[
							{
								name:'张三',
								headImg:'../../../images/weChat/D.png',
								time:'11:30',
								text:'哈哈哈哈'
							},
							{
								name:'李赛三',
								headImg:'../../../images/weChat/D.png',
								time:'11:51',
								text:'你好呀嘻嘻'
							},
						]
					}
				
				],
			},
			methods:{
				refresh(){
					location.reload();
				},
				changeType(val){
					this.rightContentType=val;
				},
				
			},
		})
	</script>
</html>
